<template>
	<!-- 全部 -->
	<u-popup :round="10" :safeAreaInsetBottom="false" :show="show" mode="center">
		<view class="content_wrap">
			<view class="title">解除共同管理人</view>
			<view class="head">
				<rf-avatar :avatarUrl="child.headSculpture" :gender="child.childSex"></rf-avatar>
				<view>{{child.childName}}</view>
			</view>

			<view class="allList">
				<u-checkbox-group v-model="checkIds" placement="column" :iconSize="21">
					<view class="cell_wrap" v-for="(item, index) in child.shareList.filter(obj=> obj.isCreate==1)">
						<view class="creator">共管人</view>
						<u-checkbox :key="item.id" :name="item.id" activeColor="#58C866"></u-checkbox>
						<image class="icon" :class="{'icon-default-avatar':!(item.avatar)}" :src="avatar(item.avatar)">
						</image>
						<view class="t_wrap">
							<view class="t f28">{{item.teacherName}}</view>
							<view class="t f24">ID：{{item.teacherId}}</view>
						</view>
					</view>
				</u-checkbox-group>

			</view>
			<view class="loginoutBtn">
				<view class="btn" @click="close">{{cancelText}}</view>
				<view class="btn confirm" @click="confirm">{{confirmText}}</view>
			</view>
		</view>
	</u-popup>

</template>

<script>
	export default {
		name: "rf-releaseChild",
		props: {
			show: {
				type: Boolean,
				required: true,
				default: false,
			},
			title: {
				type: String,
				required: false,
				default: ""
			},
			desc: {
				type: String,
				required: false,
				default: ""
			},
			child: {
				type: Object,
				required: false,
			},
			cancelText: {
				type: String,
				required: true,
				default: "取消"
			},
			confirmText: {
				type: String,
				required: true,
				default: "解除共管"
			}
		},
		data() {
			return {
				checkIds: []
			};
		},
		computed: {
			avatar() {
				return (val) => {
					return val ? val : ""
				}
			}
		},
		methods: {
			close() {
				this.checkIds.length = 0
				this.$emit('close')
			},
			confirm() {
				this.$emit('confirm', this.checkIds)
				this.checkIds.length = 0
			},
		}
	}
</script>

<style lang="scss">
	.content_wrap {
		margin: 28rpx 32rpx;
		position: relative;


		.title {
			text-align: center;

			font-size: 32rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			color: #3A3D4B;
			line-height: 44rpx;
		}

		.head {
			text-align: center;
			margin: 20rpx 0;
		}

		.cell_wrap {
			display: flex;
			position: relative;
			background-color: #F8F9FC;
			border-radius: 8rpx;
			padding-left: 20rpx;

			.creator {
				position: absolute;
				top: 0rpx;
				right: 0rpx;

				width: 108rpx;
				height: 48rpx;
				background: #EBF8EE;
				border-radius: 8rpx;

				font-size: 24rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #2DAE3D;
				line-height: 34rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.icon {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				margin: 16rpx;
			}

			.t_wrap {
				margin: 16rpx 0;
				font-size: 28rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				color: #3A3D4B;
				line-height: 40rpx;

				.t {
					height: 50%;
					display: flex;
					align-items: center;
				}
			}

		}

		.line {
			background-color: #EBECED;
			height: 2rpx;
			margin: 15rpx 0;
		}

		.allList {
			width: 480rpx;
			max-height: 600rpx;
			overflow-y: scroll;
		}

		.loginoutBtn {
			display: flex;
			justify-content: center;
			align-items: center;
			margin-top: 30rpx;

			.btn {
				width: 200rpx;
				height: 72rpx;
				color: #58C866;
				background: #FFFFFF;
				border-radius: 36rpx;
				border: 2rpx solid #58C866;
				margin: 0 10rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.confirm {
				background-color: #58C866;
				color: #fff;
			}
		}

	}
</style>